<template>
  <van-form>
    <!-- @submit="onSubmit" -->
    <!-- 文章标题 -->
    <van-field v-model="username" name="title" label="文章标题" placeholder="请输入文章内容" :rules="[{ required: true, message: '请输入文章内容' }]" />
    <!-- 文章分类 -->
    <van-field readonly clickable name="picker" :value="value" label="文章分类" placeholder="请选择文章分类" @click="showPicker = true" :rules="[{ required: true, message: '请输入分类内容' }]" />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />

    </van-popup>

    <van-field clickable name="tags" :value="checkboxGroup.join(',')" label="文章标签" placeholder="请选择文章标签" @click="showPicker2 = true" :rules="[{ required: true, message: '请输入标签内容' }]" />
    <van-popup v-model="showPicker2" position="bottom" close-icon="close" :style="{ height: '30%' }" closeable>

      <div class="tags-popup">
        <h3>请选择标签</h3>
        <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
          <van-checkbox v-for="item in taglist" :key="item.id" :name="item.tagname" shape="square">{{item.tagname}}</van-checkbox>

        </van-checkbox-group>
      </div>
    </van-popup>
    <van-field name="uploader" label="文件上传">
      <template #input>
        <van-uploader :after-read="afterRead" v-model="uploader" :max-count="1" />
      </template>
    </van-field>
    <van-field v-model="message" rows="4" autosize label="文章正文" name="content" type="textarea" placeholder="请输入正文内容" :rules="[{ required: true, message: '请输入正文内容' }]" />
    <br><br>
    <van-row type="flex" justify="space-around">
      <van-button icon="plus" type="primary" @click="publish(1)">发布</van-button>
      <van-button icon="send-gift-o" type="info" @click="publish(2)">存草稿</van-button>
      <van-button icon="revoke" type="danger" @click="resetForm">重置</van-button>
    </van-row>

  </van-form>
</template>

<script>
import { addarticle } from '@/api/addarticle'
import { getcate } from '@/api/cate'
import { userinfo } from '@/api/userinfo.js'
import { changeimg } from '@/api/modify.js'
import { getdetail } from '@/api/index'
import { doedit } from '@/api/editarticle'
export default {
  data () {
    return {
      value: '',
      value2: '',
      columns: [],
      showPicker: false,
      showPicker2: false,
      taglist: [],
      checkboxGroup: [],
      message: '',
      username: '',
      judgelist: [],
      cateid: '',
      author: '',
      uploader: [

        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明

      ],
      pic: '',
      editdetail: {}
    }
  },
  props: {
    editid: {
      type: Number,
      default: null
    },
    active: {
      type: Boolean,
      default: () => true
    }
  },

  async created () {

    console.log(this.editid);

    // this.username = this.edit.title
    // this.message = this.edit.content
    // this.uploader.push({url:'http://124.223.14.236:8060/'+this.edit.pic})
    // this.value = this.edit.catename
    // this.checkboxGroup.push(this.edit.tags)
    const result = await userinfo()
    // console.log(result);
    this.author = result.data.userInfo.username
    const res = await getcate()
    // console.log(res);
    this.judgelist = res.data.allCate
    const cates = res.data.allCate.map(item => item.catename)
    this.columns = cates
    // console.log(cates);
    const tags = res.data.allTag.map(item => {
      return { tagname: item.tagname, id: item.id }
    })
    // console.log(tags);
    this.taglist = tags
    // console.log(this.$route.query.id);
    if (this.editid) {
      const res = await getdetail(this.editid)
      console.log(res.data.info);
      this.editdetail = res.data.info
      console.log(this.editdetail);
      this.username = this.editdetail.title
      this.message = this.editdetail.content
      this.uploader.push({ url: 'http://124.223.14.236:8060/' + this.editdetail.pic })
      this.value = this.editdetail.catename
      this.checkboxGroup.push(this.editdetail.tags)

    }

  },
  mounted () {


  },
  methods: {
    // onSubmit (event) {
    //   console.log(event);
    // },

    async afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      const fd = new FormData()
      fd.append('file', file.file)
      const res = await changeimg(fd)
      console.log(this.uploader);
      console.log(res);
      if (res.errno === 0) {
        this.pic = res.data.savePath
      }

      // console.log(this.uploader);
    },
    onConfirm (value) {
      //  console.log(this.judgelist);
      const need = this.judgelist.filter(item => item.catename.includes(value))
      // console.log(need);
      this.value = value;
      this.cateid = need[0].id
      this.showPicker = false;
    },
    async publish (state) {
      let data = {
        author: this.author,
        title: this.username,
        content: this.message,
        cateid: this.cateid,
        tags: this.checkboxGroup.join(','),
        status: state,
        pic: this.pic
      }
      console.log(data);
      if (!this.message || !this.message || !this.value || this.checkboxGroup === []) {
        return this.$toast.fail('请填写完整信息')
      }
      if (this.editid) {
        data.id = this.editid
        if (this.pic === '') {
          data.pic = this.editdetail.pic
        }
        if (this.cateid === '') {
          data.cateid = this.editdetail.cateid
        }

        console.log(data);
        const res = await doedit(data)
        console.log(res);
        if (res.errno === 0) {
          this.$toast.success('修改成功')
          // this.$emit('update:active',false)
          // this.$router.push('article')
          this.$router.go(0)
          
        }
        return
      }
      const res = await addarticle(data)
      // console.log(res);
      if (res.errno === 0) {
        this.$router.push('user/article')

      }
    },
    resetForm () {
      this.message = ''
      this.username = ''
      this.value = ''
      this.checkboxGroup = []
    }
    // uploader(){

    // }
  },
}
</script>

<style scoped lang="less">
.tags-popup {
  padding: 0 20px;
  h3 {
    font-size: 30px;
    font-weight: normal;
    line-height: 100px;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
  }
}
</style>